import PropTypes from 'prop-types';
import React, {Component} from 'react';

import T from 'utils/T'
import './index.scss';
import Carousel from './carousel';

import img1 from './img/1.jpg';
import img2 from './img/2.jpg';
import img3 from './img/3.jpg';

export default class Carousel3d extends Component {

    constructor(props) {
        super(props);

        this.chart = null;
    }

    componentDidMount() {
        this.isDraw();
    }

    isDraw(){
        if(this.carouselBox){
            this.drawCarousel();
        }
    }

    drawCarousel(){
        // $(this.carousel).find('.carousel').carousel({curDisplay: 0, autoPlay: true, interval: 2000});

        const self  = this;
        this.Carousel = new Carousel($(self.carouselBox), {
            curDisplay: 0,
            autoPlay: true,
            interval: 2000,
            data: [{
                name: 'xx',
                imgUrl: img1,
                list: '星星,收到'
            },{
                name: 'xx',
                imgUrl: img2,
                list: '星星,收到'
            },{
                name: 'xx',
                imgUrl: img3,
                list: '星星,收到'
            }]
        });


    }

    componentWillUnmount() {
        clearInterval(this.Carousel.timer);
    }

    render() {

        return (
            <div className={'carousel3d_box'} ref={carouselBox => (this.carouselBox = carouselBox)}>

            </div>
        )
    }
}
